<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑者天地 - 写文章</title>
    <link rel="stylesheet" href="css/css/all.min.css">
    
    <link rel="stylesheet" href="running-editormd/css/editormd.css" />
</head>
<body>
<!-- 头部导航 -->
<div id="header-container"></div>

<div class="content-edit">
        <div class="create-post-header">
            <h1>创作新文章</h1>
            <p>分享您的跑步经验、训练技巧或装备评测，与跑者社区共同成长</p>
        </div>

        <div class="push">
            <input type="text" name="" id="title" placeholder="输入文章标题...">
        </div>
    <!-- markdown 插件 html代码 -->
    <div id="editor">
        <textarea style="display:none;" id="content" name="content">##在这里写下一篇文章</textarea>
    </div>
    <div class="form-group">
        <label for="post-category111">选择分类</label>
        <select id="post-category111" class="form-control">
            <option value="1">训练计划</option>
            <option value="2">装备测评</option>
            <option value="3">赛事经验</option>
            <option value="4">伤病恢复</option>
            <option value="5">营养健康</option>
            <option value="6">跑者生活</option>
        </select>
    </div>

    <button type="submit" class="btn-submit" id="submit" onclick="submit()">发布文章</button>
</div>


<!-- 页脚 -->
<footer>
    <div class="container">
        <div class="footer-content">
            <div class="footer-column">
                <h3>关于我们</h3>
                <ul class="footer-links">
                    <li><a href="#">社区简介</a></li>
                    <li><a href="#">团队介绍</a></li>
                    <li><a href="#">加入我们</a></li>
                    <li><a href="#">联系方式</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3>跑步资源</h3>
                <ul class="footer-links">
                    <li><a href="#">训练计划</a></li>
                    <li><a href="#">装备指南</a></li>
                    <li><a href="#">营养建议</a></li>
                    <li><a href="#">赛事日历</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3>帮助中心</h3>
                <ul class="footer-links">
                    <li><a href="#">使用指南</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">社区规则</a></li>
                    <li><a href="#">反馈建议</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3>关注我们</h3>
                <ul class="footer-links">
                    <li><a href="#"><i class="fab fa-weixin"></i> 微信公众号</a></li>
                    <li><a href="#"><i class="fab fa-weibo"></i> 新浪微博</a></li>
                    <li><a href="#"><i class="fab fa-qq"></i> QQ群</a></li>
                    <li><a href="#"><i class="fab fa-bilibili"></i> Bilibili</a></li>
                </ul>
            </div>
        </div>

        <div class="copyright">
            &copy; 2023 跑者天地论坛 - 专业的跑步交流社区 | 让每一步都有意义
        </div>
    </div>
</footer>

<script src="js/jquery.min.js"></script>

<script src="running-editormd/lib/marked.min.js"></script>
<script src="running-editormd/lib/prettify.min.js"></script>
<script src="running-editormd/editormd.min.js"></script>
<script src="js/common.js"></script>


<script type="text/javascript">
    console.log("jQuery loaded?", typeof $);
    $.ajax({})



    fetch('header.html')
        .then(response => response.text())
        .then(data => {
            document.getElementById('header-container').innerHTML = data;
            // 设置当前页面导航激活状态
            document.querySelector('a[href="write.html"]').classList.add('active');
        });

    console.log(localStorage.getItem("user_token"));

    $(function () {
        var editor = editormd("editor", {
            width: "100%",
            height: "550px",
            path: "running-editormd/lib/"
        });
    });


    function submit() {
        $.ajax({
            type:"post",
            url:"/articles/insertArticle",
            data:{
                title:$("#title").val(),
                content: $("#content").val(),
                topicId:$("#post-category111").val()
            },
            success:function (result){
                if(result.code=="SUCCESS"&&result.data == true){
                    location.href="index.html";
                }else {
                    alert(result.errMsg);
                }
            },
            error:function (error){
                if(error!=null&&error.status==401){
                    location.href = "/login.html"
                }
            }
        });
    }


</script>

</body>
</html>